<template>
  <div class="div">
    <el-skeleton style="width: 1240px;margin-left: 80px; "
                 animated
                 :loading="loading">
      <template slot="template">
        <el-skeleton-item variant="p"
                          style="width: 5%;margin-bottom: 10px;" />
        <div class="mains">
          <el-skeleton-item variant="image"
                            style="width: 160px; height: 160px;" />
          <div style="padding: 0px; width: 80%;">
            <el-skeleton-item variant="p"
                              style="width: 100%;margin-left: 60px;margin-top: 10px;" />
            <el-skeleton-item variant="p"
                              style="width: 100%;margin-left: 60px;margin-top: 10px;" />
            <el-skeleton-item variant="p"
                              style="width: 100%;margin-left: 60px;margin-top: 10px;" />
            <el-skeleton-item variant="p"
                              style="width: 100%;margin-left: 60px;margin-top: 10px;" />
            <el-skeleton-item variant="p"
                              style="width: 100%;margin-left: 60px;margin-top: 10px;" />
          </div>
        </div>
      </template>
      <template>
        <div class="top-list mtop-60">
          <!-- 官方榜 -->
          <div class="guanfang">
            <h3>{{ guanname }}</h3>
            <div class="guanfang-list"
                 v-for="(item ) in toplist"
                 :key="item.id">
              <div>
                <img v-lazy="item.coverImgUrl"
                     @click="imgId(item.id)"
                     :key="item.coverImgUrl" />
                <div class="img-icon"
                     v-if="isShow">
                  <svg class="icon"
                       aria-hidden="true">
                    <use xlink:href="#icon-gf-play"></use>
                  </svg>
                </div>
              </div>
              <div class="list">
                <div>
                  <ul>
                    <li v-for="(music,index) in item.tracks"
                        :key="music.id"
                        @click="imgId(item.id)">
                      <span class="paixu">{{ index +1}}</span>
                      <span class="name">{{ music.name }}</span>
                      <span>{{music.ar[0].name }}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="btns">
                <button @click="imgId(item.id)">查看全部<i class="el-icon-arrow-right"></i></button>
              </div>
            </div>
          </div>
          <div class="quanqiu">
            <h3>{{ quanqiu }}</h3>
            <ul>
              <li v-for="(item) in globalList"
                  :key="item.id">
                <img v-lazy="item.coverImgUrl"
                     @click="imgId(item.id)"
                     :key="item.coverImgUrl">
                <span class="play">{{(item.playCount)|changeNum }}<svg class="icon cc"
                       aria-hidden="true">
                    <use xlink:href="#icon-bofang"></use>
                  </svg></span>
                <div class="icon-size"
                     v-if="isShow">
                  <svg class="icon"
                       aria-hidden="true">
                    <use xlink:href="#icon-gf-play"></use>
                  </svg>
                </div>
                <span class="s-name">{{item.name}}</span>
              </li>
            </ul>
          </div>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script>
import { getToplist, getPlayListDetail } from '@/api/RankList'
export default {
  name: 'RankList',
  data () {
    return {
      loading: '',
      guanname: '官方榜',
      quanqiu: '全球榜',
      toplist: [],
      guanfangListId: [],
      globalList: [],
      isShow: true
    }
  },
  created () {
    this.getTopList()
  },
  methods: {
    async getTopList () {
      this.loading = true
      let res = await getToplist()
      this.guanfangListId = []
      if (res.code === 200) {
        res.list.slice(0, 4).forEach((item) => {
          this.guanfangListId.push(item.id)
        })
        this.globalList = Object.freeze(res.list.slice(4))
        this.guanfangListId.forEach((item) => {
          this.getPlayList(item)
        })
      }

    },
    /* 获取歌单详情 */
    async getPlayList (id) {
      /* 清空官方榜数据数组 */
      this.guanfangList = []
      let res = await getPlayListDetail(id)
      if (res.code === 200) {
        res.playlist.tracks = Object.freeze(res.playlist.tracks.slice(0, 5))
        this.toplist.push(Object.freeze(res.playlist))
      }
      this.loading = false
    },
    imgId (id) {
      this.$router.push({ path: '/homeitem/:id', query: { id: id } })
    }
  },
}
</script>

<style scoped lang="less">
.div {
  .mains {
    display: flex;
    .right {
      width: 1000px;
    }
  }
  .top-list {
    cursor: pointer;
    .guanfang {
      position: relative;
      .guanfang-list {
        position: relative;
        div {
          img {
            display: block;
            float: left;
            width: 160px;
            height: 160px;
            margin-top: 15px;
            border-radius: 4px;
          }
          .img-icon {
            opacity: 0;
            position: absolute;
            top: 72px;
            left: 60px;
            width: 36px;
            height: 36px;
            border-radius: 18px;
            background-color: #fff;
            .icon {
              position: absolute;
              top: 0;
              left: 0;
              width: 20px;
              height: 20px;
              margin-left: 8px;
              margin-top: 8px;
            }
          }
        }
        div:hover .img-icon {
          transition: all 1s;
          opacity: 1;
        }

        .list {
          float: left;
          height: 160px;
          width: 1020px;
          margin-left: 60px;
          margin-top: 5px;
          div {
            float: left;
            margin-top: 5px;
            ul {
              flex-grow: 1;
              li {
                height: 32px;
                width: 940px;
                line-height: 32px;
                font-size: 13px;
                .paixu {
                  float: left;
                  line-height: 32px;
                  margin-left: 10px;
                  color: #f00;
                }
                .name {
                  margin-left: 10px;
                  float: left;
                  line-height: 32px;
                  color: #373737;
                }
                span {
                  float: right;
                  color: gray;
                  line-height: 32px;
                }
              }
              li:hover {
                background-color: #efefef;
              }
            }
          }
        }
        .btns {
          button {
            margin-left: 70px;
            margin-top: 10px;
            border: none;
            background-color: #fff;
            color: gray;
          }

          button:hover {
            color: #000;
            cursor: pointer;
          }
        }
      }
    }
    .quanqiu {
      ul {
        li {
          display: block;
          float: left;
          margin-right: 30px;
          margin-top: 15px;
          border-radius: 10px;
          position: relative;
          margin-bottom: 30px;
          position: relative;
          img {
            display: inline-block;
            width: 200px;
            height: 200px;
            border-radius: 8px;
          }
          .s-name {
            position: absolute;
            top: 200px;
            left: 0;
            margin-top: 5px;
            font-size: 14px;
            color: #312520;
          }
          .play {
            position: absolute;
            top: 5px;
            width: auto;
            right: 10px;
            float: right;
            text-align: right;
            font-size: 12px;
            color: #fff;
            height: 20px;
            .cc {
              width: 20px;
              height: 20px;
              float: left;
              margin-top: -2px;
            }
          }
          .icon-size {
            opacity: 0;
            position: absolute;
            top: 80px;
            left: 80px;
            width: 36px;
            height: 36px;
            border-radius: 18px;
            background-color: #fff;
            .icon {
              width: 20px;
              height: 20px;
              margin-left: 8px;
              margin-top: 8px;
            }
          }
        }
        li:hover .icon-size {
          transition: all 1s;
          opacity: 1;
        }
      }
    }
  }
}
</style>